.drawer-main{position:fixed;top:0;width:130px;height:100%;padding-top:20px;z-index:999;}
.drawer-left .drawer-main{left:-130px;-webkit-transition:left .4s cubic-bezier(0.19,1,.22,1);-o-transition:left .4s cubic-bezier(0.19,1,.22,1);transition:left .4s cubic-bezier(0.19,1,.22,1)}
.drawer-left.drawer-open .drawer-main{left:0}
.drawer-right .drawer-main{right:-130px;-webkit-transition:right .4s cubic-bezier(0.19,1,.22,1);-o-transition:right .4s cubic-bezier(0.19,1,.22,1);transition:right .4s cubic-bezier(0.19,1,.22,1)}
.drawer-right.drawer-open .drawer-main{right:0}
.drawer-overlay{position:relative}
.drawer-left .drawer-overlay,.drawer-left .drawer-hamberger{left:0;-webkit-transition:left .4s cubic-bezier(0.19,1,.22,1);-o-transition:left .4s cubic-bezier(0.19,1,.22,1);transition:left .4s cubic-bezier(0.19,1,.22,1)}
.drawer-left.drawer-open .drawer-overlay,.drawer-left.drawer-open .drawer-hamberger{left:130px;}
.drawer-right .drawer-overlay,.drawer-right .drawer-hamberger{
   right:0;
   -webkit-transition:right .4s cubic-bezier(0.19,1,.22,1);
   -o-transition:right .4s cubic-bezier(0.19,1,.22,1);
   transition:right .4s cubic-bezier(0.19,1,.22,1)
}
.drawer-right.drawer-open .drawer-overlay,.drawer-right.drawer-open .drawer-hamberger{right:120px}
.drawer-overlay-upper{position:fixed;top:0;z-index:1100;display:none;height:100%;background-color:#000;background-color:rgba(0,0,0,.7)}
.drawer-left.drawer-open .drawer-overlay-upper{right:0}
.drawer-right.drawer-open .drawer-overlay-upper{left:0}
.drawer-default{background-color:#ddd;-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,.5);box-shadow:inset 0 0 0 rgba(0,0,0,.5)}
.drawer-default+.drawer-overlay{background-color:#fff}
.drawer-default .drawer-brand a{display:block;width:100%;padding:20px 15px;font-size:22px;color:#fff}
.drawer-default .drawer-brand a:hover{color:#444;text-decoration:none}
.drawer-default .drawer-nav-title{display:block;padding:15px 15px 0 15px;font-size:18px}
.drawer-default .drawer-nav-list{padding:0;margin:0 0 20px 0;list-style:none}
.drawer-default .drawer-nav-list li{display:block}
.drawer-default .drawer-nav-list li a{display:block;padding:15px;color:#888}
.drawer-default .drawer-nav-list li ul a{padding:8px 20px}
.drawer-hamberger{
   position:fixed;
   z-index:1000;
   display:none;
   width:25px;
   margin-top:20px;
   margin-right:10px;
   height:25px;
   display: inline-block;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius:5px;
   border:0
}
.drawer-hamberger span{margin-top:2px}
.drawer-hamberger span,.drawer-hamberger span:before,.drawer-hamberger span:after{position:absolute;display:block;width:25px;height:2px;cursor:pointer;content:'';background-color:#666666;border-radius:1px;-webkit-transition:all .4s cubic-bezier(0.19,1,.22,1);-o-transition:all .4s cubic-bezier(0.19,1,.22,1);transition:all .4s cubic-bezier(0.19,1,.22,1)}
.drawer-hamberger span:before{top:-8px}.drawer-hamberger span:after{bottom:-8px}
.drawer-open .drawer-hamberger span{background-color:transparent}
.drawer-open .drawer-hamberger span:before,.drawer-open .drawer-hamberger span:after{top:0}
.drawer-open .drawer-hamberger span:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.drawer-open .drawer-hamberger span:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.drawer-hamberger:hover{cursor:pointer}
.drawer-nav{
	overflow-y: auto;
	height:100%;
}
.drawer-nav li{
	line-height:50px;
	display: block;
	text-align: center;
	padding-left:0;
	border-bottom: 1px solid #ccc;
}
.drawer-nav li a{
	color:#000000;
	font-size:17px;
	display: block;
}
@media (max-width:760px) {
  .drawer-hamberger{
  	  display: block;
  }
}